<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水压分析报表</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="assets/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="assets/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="assets/css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
    <link href="assets/css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">
    <link href="assets/select2%204.0.3/css/select2.min.css" rel="stylesheet">
    <link href="assets/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="assets/css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/ipicture/css/iPicture_location.css" rel="stylesheet">
    <link href="assets/img/log.ico" rel="shortcut icon">
    <style>
        .HKbuttonBlue{
            border:none;
            border-radius: 2px;
            background-color: #3f85e4;
            color:#ffffff;
            width:90px;
            height: 30px;
        }
        .HKbuttonBlue:hover{
            background-color: #3876cb;
        }
        .HKbuttonBlue:active{
            background-color: #2d5fa4;
        }
        .HKbuttonBlue:disabled{
            background-color: #3f85e4;
            opacity: 20;
        }
        .HKbuttonGray{
            outline: none;
            border:1px solid #cccccc;
            border-radius: 2px;
            background-color: #ffffff;
            color:#666666;
            width:90px;
            height: 30px;
        }
        .HKbuttonGray:hover{
            border-color: #3876cb;
            color:#3876cb;
        }
        .HKbuttonGray:active{
            border-color: #2d5fa4;
            color:#2d5fa4;
        }
        .HKbuttonGray:disabled{
            border-color: #eaeaea;
            background-color: #f3f3f3;
            color:#cccccc;
        }
    </style>
</head>
<body>
<div id="wrapper" style="height: 100%">
    <div class="gray-bg dashbard-1"style="height: 100%">
        <div class="row wrapper border-bottom white-bg page-heading"style="height: 8%">
            <div class="col-lg-9">
                <h2>水压分析报表</h2>
            </div>
        </div>
        <div class="wrapper wrapper-content" style="height: 96%">
            <div class="">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group" style="padding: 0 0 0 0;">
                            <div class="col-md-1" ><select id="yearSelect" type="text"  class="form-control"></select></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12" >
                        <div class="col-lg-5 col-md-12" >
                            <div class="panel-body" style="padding: 0 0 0 0;">
                                <table class="table table-striped table-bordered table-hover " id="overViewTable" cellspacing="0" width="100%" style="height: 100%" >
                                    <thead>
                                    <tr>
                                        <th>月份</th>
                                        <th>报警数量</th>
                                        <th>已确认</th>
                                        <th>未处理</th>
                                        <th>处理率</th>
                                        <th>月详情</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-12">
                            <div class="panel-body" style="padding: 0 0 0 0;">
                                <div><canvas id="barChart" height="170"></canvas></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="chartModal" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog"  style="width: 1000px;">
        <div class="modal-content animated bounceInDown">
            <div class="modal-header" style="padding: 0 0 0 0">
                <h4 id="chartModelHeaderTitle" class="modal-title"></h4>
            </div>
            <input id="monthID" type="text" style="display: none;">
            <div class="modal-body" style="padding: 5px 5px 5px 5px;">
                <div style="padding: 0 0 0 0;"><canvas id="barChartModel"></canvas></div>
            </div>
            <div class="modal-footer">
                <button id="chartCANCEL" type="button" class="HKbuttonGray" data-dismiss="modal">&nbsp;&nbsp;关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="assets/js/jquery-2.1.1.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="assets/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/js/inspinia.js"></script>
<script src="assets/js/plugins/pace/pace.min.js"></script>
<script src="assets/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="assets/js/plugins/dataTables/dataTables.responsive.js"></script>
<script src="assets/js/plugins/dataTables/dataTables.tableTools.min.js"></script>
<script src="assets/select2%204.0.3/js/select2.full.min.js"></script>
<script src="assets/js/plugins/chartJs/Chart.min.js"></script>
<script src="assets/js/plugins/fullcalendar/moment.min.js"></script>
<script src="assets/js/plugins/daterangepicker/daterangepicker.js"></script>
<script src="assets/js/customize.js"></script>

<script>

    var report_year = 0;
    var overViewTable;
    $(function(){
        var years = [];
        var currentYear = (new Date()).getFullYear();
        for(var i = 0; i < 5; i++){
            years.push({"id":currentYear - i,"text":currentYear - i + "年份"});
        }
        $("#yearSelect").select2({
            language: {
                "noResults": function () {
                    return "没有数据";
                }
            },
            allowClear:false,
            placeholder: "请选择年份",
            data: years
        });
        report_year = $("#yearSelect").val();
        initoverViewTable();
        ReadTable();
        showChart(report_year);


    });
    $("#yearSelect").on('change',function(){
        report_year = $("#yearSelect").val();
        console.log("report_year:"+report_year);
        ReadTable();
        showChart(report_year);
    });
    function initoverViewTable() {
        overViewTable = $('#overViewTable').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索IP:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
//            ajax: "${baseURL}/water/dt_analysis_report/getAll?year=" + report_year,
            columns:[
                {"data":"month","render":function(data, type, row, meta){
                    if(data<10) data = "0"+data;
                    return data+"月";
                }},
                {"data":"null","render":function(data, type, row, meta){

                    return row.unconfirmed + row.confirmed;
                }},
                {"data":"confirmed"},
                {"data":"unconfirmed"},
                {"data":"null","render":function(data, type, row, meta){
                    if(row.unconfirmed + row.confirmed == 0){
                        return "0.00%";
                    }
                    else{
                        var ret = row.confirmed/(row.unconfirmed + row.confirmed)*100;
                        return ret.toFixed(2) + "%";
                    }

                }},
                {"data":"null","render":function(data, type, row, meta){
                    var obj = encodeURIComponent(JSON.stringify(row));
                    return '<div class="col-md-12" style="padding: 0 0 0 0;"><button type="button" data-toggle="modal" data-target="#chartModal" class="HKbuttonBlue" style="padding: 0 0 0 0;" onclick='+"showMonth("+'"'+obj+'"'+")"+'   >详&nbsp;情</button></div>'
                },"width":"15%"}
            ],
            ordering:true,
            searching:false,
            bLengthChange:false,
            info:false,
            paging:false
        });
    }


    function ReadTable() {
        $.ajax({
            url:"${baseURL}/json/water_device/channel/alarm/yearLog",
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data:JSON.stringify({"year":report_year}),
            success:function (data_in) {
                overViewTable.clear().draw();
                overViewTable.rows.add(data_in.data).draw();
            }
        });
    }
    function showMonth(obj){
        var month = JSON.parse(decodeURIComponent(obj)).month;
        var year = $("#yearSelect").val();
        $("#monthID").val(month);
        $("#chartModelHeaderTitle").html(year+"年"+month+"月记录")
        $.ajax({
            url:"${baseURL}/json/water_device/channel/alarm/monthLog",
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data:JSON.stringify({"year":report_year,"month":month}),
            async: false,
            success:function(data){
                if(data.code === 0){
                    {
                        var label = [];
                        var datas = [];
                        var alarm_datas = [];
                        var confirm_datas = [];
                        var showArr = [];
                        for (var i in data.data) {
                            label.push(data.data[i].day + "日");
                        }
                        for (var i in data.data) {
                            alarm_datas.push(data.data[i].unconfirmed);
                        }
                        for (var i in data.data) {
                            confirm_datas.push(data.data[i].confirmed);
                        }
                        for (var i in data.data) {
                            datas.push(data.data[i].confirmed+data.data[i].unconfirmed);
                        }
                        $("#chartModal").on('shown.bs.modal',function(event){
                            var barData = {
                                labels: label,
                                datasets: [
                                    {
                                        label: "未处理",
                                        fillColor: "rgba(247, 66, 72,0.5)",
                                        strokeColor: "rgba(247, 66, 72,0.8)",
                                        highlightFill: "rgba(247, 66, 72.75)",
                                        highlightStroke: "rgba(247, 66, 72,1)",
                                        data: alarm_datas
                                    },
                                    {
                                        label: "已确认",
                                        fillColor: "rgba(97,216,69,0.5)",
                                        strokeColor: "rgba(97,216,69,0.8)",
                                        highlightFill: "rgba(97,216,69,0.75)",
                                        highlightStroke: "rgba(97,216,69,1)",
                                        data: confirm_datas
                                    },
                                    {
                                        label: "报警数量",
                                        fillColor: "rgba(63, 133, 228,0.5)",
                                        strokeColor: "rgba(63, 133, 228,0.8)",
                                        highlightFill: "rgba(63, 133, 228,0.75)",
                                        highlightStroke: "rgba(63, 133, 228,1)",
                                        data: datas
                                    }
                                ]
                            };
                            var barOptions = {
                                scaleBeginAtZero: true,
                                scaleShowGridLines: true,
                                scaleGridLineColor: "rgba(0,0,0,.05)",
                                scaleGridLineWidth: 1,
                                barShowStroke: true,
                                barStrokeWidth: 2,
                                barValueSpacing: 5,
                                barDatasetSpacing: 1,
                                responsive: true,
                                multiTooltipTemplate: function(chartData) {return chartData.datasetLabel + " : " + chartData.value;}
                            }
                            var ctx = document.getElementById("barChartModel").getContext("2d");
                            var myNewChart = new Chart(ctx).Bar(barData, barOptions);
                        })

                    }
                }
                else{
                    swal({
                        title: "操作失败。",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                console.log(xhr.responseText);
                swal({
                    title: "网络错误。",
                    type: "error"
                })
            }
        });
    }
    function showChart(year){
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url:"${baseURL}/json/water_device/channel/alarm/yearLog",
            data:JSON.stringify({"year":report_year}),
            success:function(data){
                console.log(data);
                if (data.code !== 0) {
                } else {
                    var label = [];
                    var datas = [];
                    var alarm_datas = [];
                    var confirm_datas = [];
                    var showArr = [];
                    for (var i in data.data) {
                        label.push(data.data[i].month + "月");
                    }
                    for (var i in data.data) {
                        alarm_datas.push(data.data[i].unconfirmed);
                    }
                    for (var i in data.data) {
                        confirm_datas.push(data.data[i].confirmed);
                    }
                    for (var i in data.data) {
                        datas.push(data.data[i].unconfirmed + data.data[i].confirmed);
                    }
                    var barData = {
                        labels: label,
                        datasets: [
                            {
                                label: "未处理",
                                fillColor: "rgba(247, 66, 72,0.5)",
                                strokeColor: "rgba(247, 66, 72,0.8)",
                                highlightFill: "rgba(247, 66, 72.75)",
                                highlightStroke: "rgba(247, 66, 72,1)",
                                data: alarm_datas
                            },
                            {
                                label: "已确认",
                                fillColor: "rgba(97,216,69,0.5)",
                                strokeColor: "rgba(97,216,69,0.8)",
                                highlightFill: "rgba(97,216,69,0.75)",
                                highlightStroke: "rgba(97,216,69,1)",
                                data: confirm_datas
                            },
                            {
                                label: "报警数量",
                                fillColor: "rgba(63, 133, 228,0.5)",
                                strokeColor: "rgba(63, 133, 228,0.8)",
                                highlightFill: "rgba(63, 133, 228,0.75)",
                                highlightStroke: "rgba(63, 133, 228,1)",
                                data: datas
                            }
                        ]
                    };
                    var barOptions = {
                        scaleBeginAtZero: true,
                        scaleShowGridLines: true,
                        scaleGridLineColor: "rgba(0,0,0,.05)",
                        scaleGridLineWidth: 1,
                        barShowStroke: true,
                        barStrokeWidth: 2,
                        barValueSpacing: 5,
                        barDatasetSpacing: 1,
                        responsive: true,
                        multiTooltipTemplate: function(chartData) {return chartData.datasetLabel + " : " + chartData.value;}
                    }
                    var ctx = document.getElementById("barChart").getContext("2d");
                    var myNewChart = new Chart(ctx).Bar(barData, barOptions);
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "网络错误。",
                    type: "error"
                })
            }
        });
    }
</script>
</body>
</html>